import React, {Component} from 'react';
import {Breadcrumb,Tabs} from 'antd';
import {NavLink} from "react-router-dom";
import {Line, Column, Donut} from '@ant-design/charts';

const {TabPane} = Tabs;

class Numbering extends Component {
    state = {
        contentcount: 0,
        commentcount: 0,
        usercount: 0,
        count: [],
        data: {},
        orgOptionsuser: [],
        orgOptionscomment: [],
        optioncontent: [],
    }
    numbering = async () => {
        const result = await this.$axios.post("/admin/numbering");
        if (result.data.state.type === "SUCCESS") {
            this.setState({data: result.data.data})
            this.state.data.user.forEach(element => {
                let optionsUser = this.state.orgOptionsuser
                optionsUser.push({year: element.time, value: element.num})
                this.setState({orgOptionsuser: optionsUser})
            });
            this.state.data.comment.forEach(element => {
                let optionsComment = this.state.orgOptionscomment
                optionsComment.push({year: element.time, value: element.num})
                this.setState({orgOptionscomment: optionsComment})
            });
            this.state.data.count.forEach(element => {
                if (element.TABLE_NAME === "help") {
                    let count = this.state.count
                    count.push({name: "交流/问答", value: element.TABLE_ROWS});
                    this.setState({count: count})
                    let contentcount = this.state.contentcount + element.TABLE_ROWS;
                    this.setState({contentcount: contentcount})
                }
                if (element.TABLE_NAME === "activity") {
                    let count = this.state.count
                    count.push({name: "活动", value: element.TABLE_ROWS});
                    this.setState({count: count})
                    let contentcount = this.state.contentcount + element.TABLE_ROWS;
                    this.setState({contentcount: contentcount})
                }
                if (element.TABLE_NAME === "oldstuff") {
                    let count = this.state.count
                    count.push({name: "二手", value: element.TABLE_ROWS});
                    this.setState({count: count})
                    let contentcount = this.state.contentcount + element.TABLE_ROWS;
                    this.setState({contentcount: contentcount})
                }
                if (element.TABLE_NAME === "job") {
                    let count = this.state.count
                    count.push({name: "工作", value: element.TABLE_ROWS});
                    this.setState({count: count})
                }
                if (element.TABLE_NAME === "article") {
                    let count = this.state.count
                    count.push({name: "文章新闻", value: element.TABLE_ROWS});
                    this.setState({count: count})
                    let contentcount = this.state.contentcount + element.TABLE_ROWS;
                    this.setState({contentcount: contentcount})
                }
                if (element.TABLE_NAME === "comment") {
                    let commentcount = this.state.commentcount + element.TABLE_ROWS;
                    this.setState({commentcount: commentcount})
                }
                if (element.TABLE_NAME === "reply") {
                    let commentcount = this.state.commentcount + element.TABLE_ROWS;
                    this.setState({commentcount: commentcount})
                }
                if (element.TABLE_NAME === "user") {
                    let usercount = this.state.usercount + element.TABLE_ROWS;
                    this.setState({usercount: usercount})
                }
            });
            this.state.count.forEach(element => {
                let content = this.state.optioncontent;
                content.push(element);
                this.setState({optioncontent: content})
            });
        }
    }

    componentDidMount() {
        this.numbering()
    }

    render() {
        const {contentcount, commentcount, usercount} = this.state;
        const orgOptionsuser = {
            padding: 'auto',
            forceFit: true,
            data: this.state.orgOptionsuser,
            xField: 'year',
            yField: 'value',
            label: {
                visible: true,
                type: 'point',
            },
            point: {
                visible: true,
                size: 5,
                shape: 'diamond',
                style: {
                    fill: 'white',
                    stroke: '#2593fc',
                    lineWidth: 2,
                },
            },
        };
        const orgOptionscomment = {
            padding: 'auto',
            forceFit: true,
            data: this.state.orgOptionscomment,
            xField: 'year',
            yField: 'value',
            label: {
                visible: true,
                type: 'point',
            },
            point: {
                visible: true,
                size: 5,
                shape: 'diamond',
                style: {
                    fill: 'white',
                    stroke: '#2593fc',
                    lineWidth: 2,
                },
            },
        };
        const optioncontentshadow = {
            forceFit: true,
            data:this.state.optioncontent,
            padding: 'auto',
            xField: 'name',
            yField: 'value',
            meta: {
                name: { alias: '类别' },
                value: { alias: '总数' }
            },
            label: {
                visible: true,
                position: 'middle',
            },
        };
        const optioncontentpie = {
            forceFit: true,
            title: {
                visible: true,
                text: '某站点访问用户来源',
            },
            description: {
                visible: true,
                text: '纯属虚构',
            },
            radius: 0.8,
            padding: 'auto',
            data:this.state.optioncontent,
            angleField: 'value',
            colorField: 'name',
            statistic: { visible: true },
        };
        return (
            <div>
                <div className="top">
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <NavLink to='/'>首页</NavLink>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            数据中心
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div>
                    <div className="main card">
                        <p>内容(条)</p>
                        <h2 style={{marginTop: '-7px'}}>{contentcount}</h2>
                    </div>
                    <div className="card" style={{width: '2%', height: '20px'}}></div>
                    <div className="main card">
                        <p>评论(条)</p>
                        <h2 style={{marginTop: '-7px'}}>{commentcount}</h2>
                    </div>
                    <div className="card" style={{width: '2%', height: '20px'}}></div>
                    <div className="main card">
                        <p>用户(个)</p>
                        <h2 style={{marginTop: '-7px'}}>{usercount}</h2>
                    </div>
                    <div style={{clear: 'both'}}></div>
                </div>
                <div className="main">
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="用户新增趋势" key="1">
                            <Line {...orgOptionsuser} />
                        </TabPane>
                        <TabPane tab="内容数据" key="2">
                            <div style={{float: 'left', width: '55%'}}>
                                <Column {...optioncontentshadow} />
                            </div>
                            <div style={{float: 'right', width: '40%'}}>
                                <Donut {...optioncontentpie} />
                            </div>
                        </TabPane>
                        <TabPane tab="交流活跃趋势" key="3">
                            <Line {...orgOptionscomment} />
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default Numbering;